import React from "react";
import { Button, Space } from "antd-mobile";
import "./houseDetail.scss";
import { Link } from "react-router-dom";
function houseDetail() {
  return (
    <div className="houseDetail">
      {/* 头部 */}
      <header className="flex aic jc-sb header pl-15 pr-15">
        <i className="iconfont icon-zuojiantou header-left"></i>
      </header>
      {/* 照片 */}
      <div className="img rel">
        <img
          src="https://img.villaday.com//images/house_223/21727/21727-10-14498216.jpg"
          alt=""
        />
        <p className="p-icon">
          <i className="iconfont icon-heart abs heart"></i>
        </p>
      </div>
      {/* 介绍 */}
      <div className="name">
        <p className="titil">大鹏所城·古城边8房复古风名宿</p>
        <p className="name-msg">
          <span className="msg-color">8室1厅9卫·300m²·11床·16人</span>
          <span className="msg-color">房间编号：RH-212121</span>
        </p>
      </div>
      {/* 位置 */}
      <div className="splice">
        <p className="splice-name">地理位置</p>
        <p className="splice-msg">较尾场·海角9号沙滩别墅</p>
      </div>

      {/* 具体信息 */}
      <div className="msg">
        <p className="msg-nav">
          <span className="nav-choose">房源详情</span>
          <span className="nav-choose">周边美食娱乐</span>
          <span className="nav-choose">小区环境</span>
        </p>
        {/* 特色说明 */}
        <p className="poinit">
          特色：独特的装修风格，让你留恋忘返度过美好的假期
        </p>
        {/* 具体说明 */}
        <p className="detail-poinit">
          <span className="one">1、房型：3层480平米，6房3厅8卫，可住20人</span>
          <span className="one">
            2、床型：5张1.8米大床、3张1.5米双人床、7张1.2米榻榻米、2张1米单人床；
          </span>
          <button className="but">查看全部</button>
        </p>
      </div>
      {/* 底部按钮 */}
      <Link to="/home/calendar">
        <Button block color="primary" size="large">
          查看价格·预定
        </Button>
      </Link>
    </div>
  );
}

export default houseDetail;
